<template>
    <div>
        <div class="directCourse">直播课程</div>
        <!--        tab切换-->
        <div class="container">
            <div class="left">
                <div>
                    <img :src="list[index].url" alt="">
                    <div class="backgroundImage-opaque">
                        <div class="left-title">{{list[index].title}}</div>
                        <div class="left-state">
                            <a-icon type="check-circle" style="padding:10px "/>
                            {{list[index].content}}
                        </div>
                        <button class="button">{{list[index].button}}</button>
                    </div>
                </div>
            </div>
            <ul class="right">
                <li class="listOne" v-for="(item,index) in list " :key="index" @mouseenter="move(index)">
                    <a-icon type="check-circle" style="padding:30px "/>
                    <span style="padding-right: 20px">{{item.time}}</span>{{item.title}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Direct",
        data() {
            return {
                tabPosition: 'right',
                index: 0,
                list: [
                    {
                        url: 'https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png',
                        title: '研究生复试之高效准备简历的方法',
                        content: '直播结束',
                        button: '直播结束',
                        time: '直播结束',
                        icon: "<a-icon type=\"check-circle\" style=\"padding:10px \"/>"
                    }, {
                        url: 'https://online-course.nos-eastchina1.126.net/数据结构与算法 基础篇 拷贝-1252123020651134976.jpg',
                        title: ' 十大经典排序之Part-6-完结篇',
                        content: '直播结束',
                        button: '直播结束',
                        time: '直播结束'
                    }, {
                        url: 'https://online-course.nos-eastchina1.126.net/封面-1258625253353979904.png',
                        title: ' jdk1.8-新特性之函数式接口与方法引用',
                        content: '直播结束',
                        button: '直播结束',
                        time: '直播结束'
                    }, {
                        url: 'https://online-course.nos-eastchina1.126.net/直播封面-1254953535796150272.png',
                        title: ' 高考之殇与痛则思变',
                        content: '尚未开播',
                        button: '尚未开播',
                        time: '05-08 23:00'
                    },
                ],
            };
        },
        methods: {
            move(index) {
                this.index = index;
            }
        },
    }
</script>

<style scoped>

    .directCourse {
        width: 100%;
        height: 120px;
        /*   border: 1px red solid; */
        font-size: 25px;
        text-align: center;
        line-height: 150px;
    }

    .container {
        display: flex;
        margin: 0px 150px;
    }

    .left {
        float: left;
        height: 400px;
        width: 600px;
        background-color: black;
        position: relative;

    }
    /*备注   设置左边border切换的时候 字总有颤动 设置到右边就没事了，暂时没找到原因？？？*/
    .right {
        float: left;
        height: 400px;
        width: 600px;
        /*border: 1px solid #ccc;*/
        background-color: #F4F4F4;
        /*padding-left: 0px;*/
    }

    .listOne {
        /* ;*/
        height: 50px;
        line-height: 50px;
        list-style: none;
        font-size: 16px;
    }

    .listOne:hover {
        color: #00cf8c;
        border-right: 4px solid #00cf8c;
        background-color: #fff;
        cursor: pointer;
    }

    .left img {
        width: 600px;
        height: 400px;
    }

    .backgroundImage-opaque {
        padding: 80px 50px;
        height: 400px;
        width: 600px;
        background-color: rgba(0, 0, 0, .6);
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        position: absolute;
        top: 0%;
        left: 0%;

        text-align: center;
        color: white;
    }

    .ant-btn ant-btn-primary {
        background-color: green !important;
    }

    .left-title {
        font-size: 24px;
        margin-top: 30px;
    }

    .left-state {
        font-size: 14px;
        margin-top: 10px;
    }

    .button {
        background-color: #00cf8c;
        width: 180px;
        height: 50px;
        font-size: 18px;
        margin-top: 10px;
        border-radius: 5px;
        outline:none
    }
</style>